<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>

<body>
<div id="app">
    <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="商品查询">
            <el-input v-model="search.selectnames"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit1" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item label="类别">
            <el-select v-model="search.selecttype" placeholder="全部">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="女装男装" value="女装男装"></el-option>
                <el-option label="鞋类箱包" value="鞋类箱包"></el-option>
                <el-option label="护肤彩妆" value="护肤彩妆"></el-option>
                <el-option label="百货市场" value="百货市场"></el-option>
                <el-option label="手机数码" value="手机数码"></el-option>
                <el-option label="家电办公" value="家电办公"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit2" icon="el-icon-search">筛选</el-button>
            <el-button type="primary" icon="el-icon-shopping-cart-full" circle onclick="window.location.href = 'http://localhost:8080/ShowCar.html'"></el-button>
            <el-button type="primary" onclick="window.location.href = 'http://localhost:8080/SellerAdmi.html'">管理物品</el-button>
            <el-button type="primary" icon="el-icon-s-home" circle onclick="window.location.href = 'http://localhost:8080/denglu.html'"></el-button>
        </el-form-item>
        <el-avatar > [[${session.user}]] </el-avatar>
    </el-form>


    <template>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="type" label="类别" align="center">
            </el-table-column>
            <el-table-column prop="names" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="prices" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="numbers" label="剩余数量" align="center">
            </el-table-column>
            <el-table-column prop="sellers" label="卖家" align="center">
            </el-table-column>
            <el-table-column prop="sellers" label="联系" align="center">
                <el-button type="primary" plain icon="el-icon-phone-outline"></el-button>
            </el-table-column>
            <el-table-column prop="name" label="购买" align="center">
                <template slot-scope="scope">
                <el-button type="text" @click="addRow(scope.$index, tableData)" icon="el-icon-shopping-cart-2">加入购物车
                </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="评论" align="center">
                <el-row>
                    <el-button type="primary" plain>查看</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[8, 16, 24, 32]" :page-size="8" layout="total, sizes, prev, pager, next, jumper"
                   :total="totalCount">
    </el-pagination>



</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',

        mounted() {
            //当页面加载完成发送异步请求获取数据
            this.selectPage();
        },

        methods: {
            //查询分页数据
            selectPage(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/selectShowPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
                }).then(function (resp) {
                    _this.tableData=resp.data.rows;
                    _this.totalCount=resp.data.totalCount;
                })
            },



            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1 || rowIndex === 5) {
                    return 'warning-row';
                } else if (rowIndex === 3 || rowIndex === 7) {
                    return 'success-row';
                }
                return '';
            },

            //搜索提交
            onSubmit1() {
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/selectShowNames?names="+this.search.selectnames+"&currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
                }).then(function (resp) {
                    _this.tableData=resp.data.rows;
                    _this.totalCount=resp.data.totalCount;

                })

            },//分类提交
            onSubmit2() {
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/selectShowType?type="+this.search.selecttype+"&currentPage="+this.currentPage+"&pageSize="+this.pageSize
                }).then(function (resp) {
                    _this.tableData=resp.data.rows;
                    _this.totalCount=resp.data.totalCount;

                })

                //分页
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.selectPage();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.selectPage();
            },
            addRow(index, rows) {
                console.log(rows[index].names);
                console.log(rows[index].prices);
                axios({
                    method: "get",
                    url: "http://localhost:8080/ShowCarController/buy?names=" + rows[index].names + "&prices=" + rows[index].prices
                })
            },
        }, data() {
            return {
                //总记录数
                totalCount:16,
                //每页显示条数
                pageSize:8,

                //当前页码
                currentPage: 1,


                //搜索表单数据
                search: {
                    selecttype: '',
                    selectnames: ''
                },
                //表格数据
                tableData:[]
            }
        }

    })
</script>

</html>